<template>
  <div class="goodsListMore-container">
    <TopHeader />

    <div class="goodsList-container">
      <el-tabs :value="init"
        type="card"
        @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in classification"
          :key="index"
          :label="item.name"
          :name="item.name">
          <GoodsList :list="goodsData"
            :isMore="false" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
//header
import TopHeader from '@/components/modules/header.vue';
//goodsList
import GoodsList from '@/components/modules/GoodsList.vue';
//api
import {
  getListclassification,
  getCommodityBycaid,
  getCommodityLike,
} from '@/utils/api/api.js';
export default {
  components: {
    TopHeader,
    GoodsList,
  },
  data() {
    return {
      //分类
      classification: [],

      //组件传值数据
      goodsData: [],

      tabNum: 0,

      init: '',
    };
  },
  methods: {
    handleClick(tab) {
      getCommodityBycaid(Number(tab.index) + 1).then(resp => {
        this.init = this.classification[tab.index].name;
        this.goodsData = resp.sku;
      });
    },
  },
  created() {
    getListclassification().then(resp => {
      resp.sku.forEach(item => {
        this.classification.push({
          id: item.cid,
          name: item.title,
        });
      });
      if (this.tabNum != 0) {
        this.init = this.classification[this.tabNum - 1].name;
      }
    });

    //如果是点击浏览更多进入该页面，则加载商品分类
    if (Object.keys(this.$route.query).length == 0) {
      //自动选中第一个tab
      // console.log('无数据');

      getCommodityBycaid(1).then(resp => {
        this.goodsData = resp.sku;
        this.init = this.classification[0].name;
      });
    } else {
      if (this.$route.query.hasOwnProperty('tabNum') == true) {
        // console.log(this.$route.query.tabNum);
        this.tabNum = this.$route.query.tabNum;
        getCommodityBycaid(this.$route.query.tabNum).then(resp => {
          this.goodsData = resp.sku;
        });
      } else if (this.$route.query.hasOwnProperty('query') == true) {
        //如果是搜索框跳转，则加载搜索结果
        getCommodityLike(this.$route.query.query).then(resp => {
          this.goodsData = resp.sku;
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import './goodsListMore.scss';
</style>